<template>
<div class="dh">
<m-header :title="title" :show=true></m-header>
<div class="headk"></div>
<div class="conditionsk">
    <div class="conditions" v-show="conditions != 0" @click="ckconditions(0)">综合</div>
    <div class="conditions1" v-show="conditions == 0">综合</div>
    <div class="conditions" v-show="conditions != 1" @click="ckconditions(1)">最热</div>
    <div class="conditions1" v-show="conditions == 1">最热</div>
    <div class="conditions" v-show="conditions != 2" @click="ckconditions(2)">新品</div>
    <div class="conditions1" v-show="conditions == 2">新品</div>
    <div class="conditions" v-show="conditions != 3" @click="ckconditions(3)">价格从低到高</div>
    <div class="conditions1" v-show="conditions == 3">价格从低到高</div>
</div>
<div class="listk" v-for="item in list" :key="item.zan">
    <img class="listimg" :src="item.img">
    <div>
        <div class="text1">{{item.name}}</div>
        <div class="text2">￥{{item.money}}</div>
        <div class="text3">{{item.views}}浏览 {{item.zan}}赞 {{item.comments}}评论</div>
    </div>
    <div class="text4" @click="openbuy">立即预定</div>
</div>
</div>
</template>
<script>
import MHeader from "components/header/header";
export default {
  name: "",
  components: {
    MHeader
  },
  data() {
    return {
      conditions: 0,
      list: [
        {
          name: "完美汽车出租",
          img: require("../../assets/carimg.png"),
          money: 1400,
          views: 100, //浏览量
          zan: 50, //赞
          comments: 0, //评论
          date: 20180928
        },
        {
          name: "小龙汽车出租",
          img: require("../../assets/carimg.png"),
          money: 500,
          views: 150, //浏览量
          zan: 260, //赞
          comments: 500, //评论
          date: 20180718
        },
        {
          name: "神舟汽车出租",
          img: require("../../assets/carimg.png"),
          money: 80,
          views: 200, //浏览量
          zan: 100, //赞
          comments: 0, //评论
          date: 20180601
        }
      ],
      title: "车船出租"
    };
  },
  created() {
    this.ckconditions(0);
  },
  methods: {
    openbuy() {
      this.$router.push("/buy");
    },
    ckconditions(e) {
      console.log(e);
      this.conditions = e;
      var compare = function(obj1, obj2) {
        console.log(e);
        var a = "";
        var b = "";
        if (e == 0) {
          b = obj1.views + obj1.zan + obj1.comments - obj1.money;
          a = obj2.views + obj2.zan + obj2.comments - obj2.money;
        } else if (e == 1) {
          a = obj1.views + obj1.zan + obj1.comments;
          b = obj2.views + obj2.zan + obj2.comments;
        } else if (e == 2) {
          a = obj2.date;
          b = obj1.date;
        } else if (e == 3) {
          a = obj1.money;
          b = obj2.money;
        }
        if (a < b) {
          return -1;
        } else if (a > b) {
          return 1;
        } else {
          return 0;
        }
      };
      var c = this.list;
      this.list = c.sort(compare);
      console.log(this.list);
    }
  }
};
</script>
<style scoped>
.dh {
  width: 100%;
  height: 100%;
}
.headk {
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.conditionsk {
  height: 65px;
  display: flex;
  border-bottom: solid 4px #969696;
}
.conditions {
  width: 25%;
  line-height: 65px;
  text-align: center;
}
.conditions1 {
  width: 25%;
  line-height: 65px;
  text-align: center;
  color: #ff7900;
}
.listk {
  height: 230px;
  display: flex;
  padding: 10px;
}
.listimg {
  height: 210px;
  width: 210px;
  margin-right: 15px;
}
.text1 {
  color: #333333;
  font-size: 22px;
}
.text2 {
  color: #ff7900;
  font-size: 22px;
  margin-top: 80px;
}
.text3 {
  color: #c8c8c8;
  font-size: 19px;
  margin-top: 30px;
}
.text4 {
  color: #ffffff;
  font-size: 22px;
  width: 140px;
  height: 40px;
  border-radius: 20px;
  background-color: #ff7900;
  text-align: center;
  line-height: 40px;
  position: absolute;
  right: 10px;
  margin-top: 170px;
}
</style>